<template>
  <div>
    <!-- 页面内容 -->
    <div id="home" class="page">

      <div id="div1">
        <div style="color: black;font-size: 30px; font-weight: bold;">总体简介：</div>
        <div style="color: black;font-size: 24px">
          利用网络爬虫从车主之家、国家统计局等网站抓取近年来<br>
          科学工具包进行统计分析，对中国今年汽车销量总体趋势<br>
          进行分析，通过构建长短时记忆网络(LSTM)模型、灰色<br>
          预测模型对新能源汽车销量数据进行建模和预测。<br>
          利用spring boot、myqsql搭建web后端分析服务，<br>
          利用vue、CSS和Echarts等搭建交互式可视化分析系统。
        </div>
      </div>
      <img id="img1" :src="imagePath" alt="描述性文本">
    </div>
    <div style="clear: both;"></div>
    <div class="container">
      <div class="card div2">
        <div style="color: black;font-size: 16px; font-weight: bold;">汽车销量数据采集:</div>
        <div class="indent">
          通过使用python中的requests和BeautifulSoup库，完成对国家统计局和网上公开数据如车主之家的爬取，
          并完成与数据库格式的对接，实现数据爬取。然后再将前面通过python爬取到的数据进行数据清洗，
          使用Numpy和Pandas两个库，剔除爬取到的不合理的值与格式不对的值，实现与数据库格式的对接。
        </div>
      </div>

      <div class="card div2">
        <div style="color: black;font-size: 16px; font-weight: bold;">汽车销量预测：</div>
        <div class="indent">
          选择合适的预测算法如LSTM、灰色预测算法等，通过前面所获得的标准数据集对数据进行基本预测，
          遵循7：2：1的划分，即拿出数据集的70%对模型进行训练，20%的数据集进行验证，
          10%的数据集进行测试。
        </div>
      </div>

      <div class="card div2">
        <div style="color: black;font-size: 16px; font-weight: bold;">构建交互可视化分析平台：</div>
        <div class="indent">
          利用spring boot、vue2、CSS和Echarts搭建可视化交互分析平台。
          可便捷的分析出不同品牌的销售量趋势。及不同品牌的对比情况。
        </div>
      </div>

      <div class="card div2">
        <div style="color: black;font-size: 16px; font-weight: bold;">品牌汽车销量对比分析：</div>
        <div class="indent">
          计算每个品牌每月的总销售量，并分析某个月份或者年份各类汽车总销售量的对比分析,
          分析该月度或年度热销的TOP50的汽车品牌,及其在总销售量的占比分布情况。此外，
          也可以查看某品牌在某省份不同车型的月销量情况和不同省份的总体月销量情况，
          并给出相应的分析与建议。
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'TaskZero',
  components: {

  },
  data() {
    return {
      imagePath: require('@/assets/home.jpg')
    }
  }
}

</script>

<style>
.div2 {
  /* background-color: aliceblue; */
  display: inline-block;
  margin-left: 50px;
  margin-top: 20px;
  width: 18%;
  color: black;
}

#first {
  margin-left: 95px;
}

#home {
  display: flex;
  /* 启用Flex布局 */
  align-items: center;
  /* 垂直居中对齐 */
}

#div1 {
  flex: 1;
  /* 让文字部分占据剩余空间 */
  margin-left: 20px;
  /* 可选，增加与图片的间隔 */
}

#img1 {
  max-width: 45%;
  /* 图片宽度不超过其容器宽度 */
  height: auto;
  /* 保持图片原始宽高比 */
}

.container {
  display: flex;
  flex-wrap: nowrap;
  /* 确保卡片不换行 */
  justify-content: space-between;
  /* 保持卡片间合理间距，可按需调整 */
  transform: translateX(-100px); /* 根据需要调整数值，这里的负值会让容器整体左移 */
}

.card {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 10px;
  margin-left: -200px; /* 或根据需要调整负值大小 */
  top: 0px;
  /* 向下移动10像素 */
  left: 10px;
  /* 向右移动20像素 */
  flex-grow: 1;
  /* 让卡片自动填充容器宽度 */
  /* 如果需要限制卡片最大宽度以防止过度拉伸，可以添加如下属性：
  max-width: 25%; // 或者根据实际需要设定其他百分比
  */
  display: flex;
  flex-direction: column;
  /* 保证卡片内部元素垂直排列 */
}

.card div:first-child {
  /* 仅针对标题设置样式 */
  color: rgb(5, 5, 5);
}

.indent {
  text-indent: 2em;
  /* 2em相当于两个字符的宽度，可根据需要调整 */
}
</style>